<template>
<div class="hello">
    <header-tab msg="大盘详情"></header-tab>
    <div class="title_wraper">
        <div class="title_box">
            <p class="value_width lastPrize_red" v-if="Number(lastPrize)>Number(detailForm.openingPrice)">{{lastPrize}}</p>
            <p class="value_width lastPrize_green" v-else>{{lastPrize}}</p>
            高
            <p class="value_width">{{detailForm.maxPrice}}</p>开
            <p class="value_width">{{detailForm.openingPrice}}</p>
            
            
        </div>
        <div class="title_box">
            <p class="value_width_two"></p>量
            <p class="value_width_two">{{detailForm.volume}}</p>低
            <p class="value_width_two">{{detailForm.minPrice}}</p>
        </div>
    </div>
      <line-form :chart-data="historySaleInfo" />
</div>
</template>

<script>
import HeaderTab from '../components/HeaderTab'
import {Market,getChartInfo} from '../api/index.js'
import echarts from 'echarts';
import LineForm from './components/LineForm'  // 趋势图
export default {
    components: {
        HeaderTab,LineForm
    },
    data() {
        return {
            data:[],
            detailForm: {},
            lastPrize: '',
            data0:[],
            historySaleInfo: {  //近30天销售趋势
                dataValue: [],
                dataName: [],
                dataTitle: ['上证指数趋势']
            },
            timer: ''
        }
    },
    created(){
        this.chartsInfo();
        this.timer = setInterval(()=>{
            this.chartsInfo()
        },6000);
        this.getMarketDetails();
    },

    methods: {
        backPreview() {
            this.$router.go(-1);
        },
       
        getMarketDetails(){
            Market().then(res=>{
                if(res.data.code == '000'){
                    this.detailForm = res.data.content
                }

            })
        },
        chartsInfo(){
            getChartInfo().then(res => {
                if(res.data.code == '000'){
                    this.historySaleInfo.dataValue = []
                    this.historySaleInfo.dataName = []
                    let data = res.data.content
                    this.lastPrize = data[data.length-1].prize
                    let yCount = []
                    let xDay = []
                    data.forEach(item=>{
                        yCount.push(item.prize)
                        xDay.push(item.date)
                    })
                    this.historySaleInfo.dataValue.push(yCount)
                    this.historySaleInfo.dataName = xDay
                }
            })
        },

    },
    mounted() {
        this.$nextTick(()=>{
            // this.initChart()
        })
    },
    destroyed(){
        clearInterval(this.timer);  
        this.timer = null;
    }

};
</script>

<style lang="less" scoped>
.hello{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    background: #f4f4f4;
    overflow-y: scroll;
}
#echartContainer {
    width: 100%;
    height: 800px;
    margin-top: 20px;
}
.title_wraper {
    height:100px;
    display:flex;
    flex-wrap: wrap;
    margin-left:5%;
    margin-bottom:5%;
    .title_box {
        width:100%;
        height:50px;
        line-height:50px;
        display:flex;
        justify-content:space-between;
        .value_width {
            width: 25%;
        }
        .value_width_two {
            width: 25%;
        }
    }
}
.lastPrize_red {
    color: red;
    font-size: 16px;
    font-weight: bold;
}
.lastPrize_green {
    color: green;
    font-size: 16px;
    font-weight: bold;
}
</style>
